
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html, body {
            height: 210mm;
            width: 297mm;
            margin: 0;
            padding: 0;
        }
        body{
            /* border:10px solid #333; */
        }
        .f1{
            width: 50%;
            height: 105mm;
            box-sizing: border-box;
            padding:2mm;
            /* background-color: #ffffcc; */
        }
        table{
            border-collapse: collapse;
            /* background:#ffcccc; */
        }
        table tr{height:14.2857%;}
        table tr td{
            border: 1px solid #333333;
            text-align: center;
        }
        table tr td img{
            margin-left: 2mm;
            height: 8mm;
            width: auto;
        }
        table tr td *{
            vertical-align: middle;
            line-height: 8mm;
        }


        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: all 0.3s;
        }
        button:hover {
            background-color: #45a049;
            transform: translateY(-2px);
        }
        .controls {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        input {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            flex-grow: 1;
        }
    </style>
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<!-- Code injected by Five-server -->
  <script async data-id="five-server" data-file="c:\Users\ashen\Desktop\签到.html" type="application/javascript" src="/fiveserver.js"></script>
  </head>
<body>

    <!-- <div class="controls">
        <input type="text" id="fileName" placeholder="输入保存的文件名（默认：screenshot）">
        <button onclick="captureDiv()">截图并保存</button>
    </div> -->

    <div id="box" style="display: flex; flex-wrap: wrap;">
        <!-- <div class="f1">
            <table style="width:100%;height:100%;">
                <tr>
                    <td colspan="5">
                        <span style="display:inline-block;width:40%;"><span>姓名：</span><span class="names"></span></span>
                        <span style="display:inline-block;width:40%;">班级：大二班</span>
                    </td>
                </tr>
                <tr>
                    <td><span>姓名</span><img src="./a.jpg" alt="" /></td>
                    <td><span>日期</span><img src="./b.jpg" alt="" /></td>
                    <td><span>星期</span><img src="./c.jpg" alt="" /></td>
                    <td><span>时间</span><img src="./d.jpg" alt="" /></td>
                    <td><span>天气</span><img src="./e.jpg" alt="" /></td>
                </tr>
                <tr><td></td><td></td><td></td><td></td><td></td></tr>
                <tr><td></td><td></td><td></td><td></td><td></td></tr>
                <tr><td></td><td></td><td></td><td></td><td></td></tr>
                <tr><td></td><td></td><td></td><td></td><td></td></tr>
                <tr><td></td><td></td><td></td><td></td><td></td></tr>
            </table>
        </div> -->
    </div>
    </div>
    <script>
        const arr = [
            "郑翌雄",
            "冯辰阳",
            "蒋雨萱",
            "王依铭",
            "彭疏影",
            "叶雅婷",
            "袁思茼",
            "李祖坤",
            "李圆林",
            "黄仁宇",
            "王德伴胡",
            "蒲珦安辰",
            "何星逸",
            "桐宇宸",
            "祝一航",
            "苏瑾瑞",
            "吴星辰",
            "施艺芯",
            "李逸凡",
            "王颖琪",
            "杨美龄",
            "柯智豪",
            "谢德煊",
            "王家馥",
            "杜朝浩宇",
        ];
        const box = document.getElementById('box');
        arr.forEach((i)=>{
            itemElement = document.createElement('div');
            itemElement.className = 'f1';
            itemElement.innerHTML = `
                <table style="width:100%;height:100%;">
                    <tr>
                        <td colspan="5">
                            <span style="display:inline-block;width:40%;"><span>姓名：</span><span class="names">${i}</span></span>
                            <span style="display:inline-block;width:40%;">班级：大二班</span>
                        </td>
                    </tr>
                    <tr>
                        <td><span>姓名</span><img src="./a.jpg" alt="" crossorigin="anonymous" /></td>
                        <td><span>日期</span><img src="./b.jpg" alt="" crossorigin="anonymous" /></td>
                        <td><span>星期</span><img src="./c.jpg" alt="" crossorigin="anonymous" /></td>
                        <td><span>时间</span><img src="./d.jpg" alt="" crossorigin="anonymous" /></td>
                        <td><span>天气</span><img src="./e.jpg" alt="" crossorigin="anonymous" /></td>
                    </tr>
                    <tr><td></td><td></td><td></td><td></td><td></td></tr>
                    <tr><td></td><td></td><td></td><td></td><td></td></tr>
                    <tr><td></td><td></td><td></td><td></td><td></td></tr>
                    <tr><td></td><td></td><td></td><td></td><td></td></tr>
                    <tr><td></td><td></td><td></td><td></td><td></td></tr>
                </table>
            `
            box.appendChild(itemElement);
            box.appendChild(itemElement.cloneNode(true));
            box.appendChild(itemElement.cloneNode(true));
            box.appendChild(itemElement.cloneNode(true));
        })


        function captureDiv() {
            const targetDiv = document.getElementById('box');
            const fileName = document.getElementById('fileName').value || 'screenshot';
            
            html2canvas(targetDiv, {
                scale: 2,
                logging: false,
                useCORS: true,
                allowTaint: true
            }).then(canvas => {
                const image = canvas.toDataURL('image/png');
                const link = document.createElement('a');
                link.download = `${fileName}.png`;
                link.href = image;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            });
        }
    </script>
</body>
</html>